<!-- 销售订单详情弹窗 -->
<template>
  <div>
  <a-form
    ref="form3"
    class="ele-form-detail"
    :model="saleOrderModalApp.saleOrder"
    :label-col="{md: {span: 2}, sm: {span: 4}, xs: {span: 6}}"
    :wrapper-col="{md: {span: 22}, sm: {span: 20}, xs: {span: 18}}">
    <a-descriptions :title="saleOrderModalApp.title" bordered>
<!--      <a-descriptions-item label="标识">-->
<!--        {{ saleOrderModalApp.saleOrder.Eid }}-->
<!--      </a-descriptions-item>-->
<!--      <a-descriptions-item label="创建人">-->
<!--        {{ saleOrderModalApp.saleOrder.creatorName }}-->
<!--      </a-descriptions-item>-->
<!--      <a-descriptions-item label="名称">-->
<!--        {{ saleOrderModalApp.saleOrder.name }}-->
<!--      </a-descriptions-item>-->
      <a-descriptions-item label="桌号">
        {{ saleOrderModalApp.saleOrder.deskNum }}
      </a-descriptions-item>
      <a-descriptions-item label="销售价格">
        {{ saleOrderModalApp.saleOrder.price }}
      </a-descriptions-item>
      <a-descriptions-item label="销售时间">
        {{ saleOrderModalApp.saleOrder.saleDate }}
      </a-descriptions-item>
      <a-descriptions-item label="状态">
        {{ saleOrderModalApp.saleOrder.status }}
      </a-descriptions-item>
      <a-descriptions-item label="创建人ID">
        {{ saleOrderModalApp.saleOrder.creatorId }}
      </a-descriptions-item>
      <a-descriptions-item label="备注">
        {{ saleOrderModalApp.saleOrder.remark }}
      </a-descriptions-item>
      <a-descriptions-item label="创建时间">
        {{ saleOrderModalApp.saleOrder.createDatetime }}
      </a-descriptions-item>
    </a-descriptions>
  </a-form>

    <vxe-table
      :data="tableData">
      <vxe-column type="seq" width="60" title="序号"></vxe-column>
      <vxe-column field="name" title="名称"></vxe-column>
      <vxe-column field="menuPrice" title="单价"></vxe-column>
      <vxe-column field="amount" title="数量"></vxe-column>
      <vxe-column field="totalPrice" title="总价"></vxe-column>
    </vxe-table>

  </div>
</template>

<script>
import {defineComponent, reactive, onMounted, inject,ref} from "vue";
import {useRoute} from "vue-router"
import {SaleOrderService} from "@/views/restaurant/sale/saleOrder/saleOrderService";

export default defineComponent({
  setup() {
    const route = useRoute();
    let routeId = route.params.id;
    let saleOrderListApp = inject('saleOrderListApp', reactive({}));
    const saleOrderModalApp = reactive({id: null, saleOrder: {}, display: false});

    onMounted(() => {
      saleOrderModalApp.saleOrder = {};
      if (routeId) {
        saleOrderModalApp.id = routeId;
      } else if (saleOrderListApp.viewModalShowing) {
        saleOrderModalApp.id = saleOrderListApp.currentId;
        saleOrderModalApp.display = true;
      }
      if (saleOrderModalApp.id) {
        getInfo(saleOrderModalApp.id);
      }
    })

    const getInfo = (id) => {
      SaleOrderService.findSaleOrderForView(id).then((res) => {
        saleOrderModalApp.saleOrder = res.data;
        tableData.value=res.data.menuSaleRecords;
        tableData.value.forEach(item=>{
          item.totalPrice=item.menuPrice*item.amount;
        })
        console.log(res.data)
        // saleOrderModalApp.title = "查看 " + saleOrderModalApp.saleOrder.name;
      })
    }
    const tableData = ref([]);
    return {
      saleOrderModalApp,
      routeId,
      getInfo,
      tableData
    }
  }
})
</script>

<style scoped>
</style>

